import { memo } from "react"
import { QRCode } from "antd";
const Footer = memo(() => {

  const qrCode = "https://ant-design.antgroup.com/components/overview-cn";

  return (
    <footer className="bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 pb-8">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {/* 关于我们 */}
          <div>
            <h3 className="text-lg font-semibold text-gray-900 mb-4">关于我们</h3>
            <p className="text-gray-600 text-sm">
              前端技术社区致力于分享优质的前端技术内容，帮助开发者成长。
            </p>
          </div>

          {/* 快速链接 */}
          <div>
            <h3 className="text-lg font-semibold text-gray-900 mb-4">快速链接</h3>
            <ul className="space-y-2">
              <li><a href="/articles" className="text-gray-600 hover:text-gray-900 text-sm">技术文章</a></li>
              <li><a href="/resources" className="text-gray-600 hover:text-gray-900 text-sm">学习资源</a></li>
              <li><a href="/community" className="text-gray-600 hover:text-gray-900 text-sm">社区讨论</a></li>
            </ul>
          </div>

          {/* 联系方式 */}
          <div>
            <h3 className="text-lg font-semibold text-gray-900 mb-4">联系我们</h3>
            <ul className="space-y-2">
              <li className="text-gray-600 text-sm">邮箱：2781463390@qq.com</li>
              <li className="text-gray-600 text-sm flex"><span>微信公众号：</span>
                <QRCode value={qrCode} className="w-25 h-25 bg-[#f9fafb] p-2 shadow" />
              </li>
            </ul>
          </div>

          {/* 订阅区域 */}
          <div>
            <h3 className="text-lg font-semibold text-gray-900 mb-4">订阅更新</h3>
            <p className="text-gray-600 text-sm mb-4">订阅后，我们将为您不定期推送前端新技术</p>
            <div className="flex">
              <input
                type="email"
                placeholder="输入您的邮箱"
                className="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none"
              />
              <button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
                订阅
              </button>
            </div>
          </div>
        </div>
        {/* 版权信息 */}
        <div className="mt-12 pt-8 border-t border-gray-200">
          <p className="text-center text-gray-500 text-sm">
            © {new Date().getFullYear()} 前端技术社区. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  )
})

export default Footer